<template>
    <div class="page-container h-100">
        <div class="h-100 container" style="background: #fff">
            <div class="topView">
                <el-link @click="openWind" v-if="!isProjectionScreen" class="projectionDisplay">
                    <!--投屏显示-->
                    {{this.i18n.t('Projection display')}}
                    <i style="margin-left: 5px;font-size: 14px" class="iconfont-KUI icon-pingmujingxiang"></i> </el-link>

                <el-link class="displayMode" @click="fscreen" v-if="isProjectionScreen&&!isFullscreen">
                    <!--全屏-->
                    {{this.i18n.t('full screen')}}
                    <i class="iconfont-KUI icon-quanping"></i> </el-link>
                <el-link class="displayMode" @click="fscreen" v-if="isProjectionScreen&&isFullscreen">
                    <!--退出全屏-->
                    {{this.i18n.t('Exit Full Screen')}}
                    <i class="iconfont-KUI icon-24gl-minimize2"></i> </el-link>

                <div class="switchView" v-if="!isProjectionScreen">
                    <!--声音提醒-->
                    {{this.i18n.t('Voice Reminder')}}
                    <el-switch
                            @change="soundChange"
                            :active-value="1"
                            :inactive-value="0"
                            v-model="soundSwitch"
                    >
                    </el-switch>
                </div>
            </div>
            <div style="height: calc(100% - 53px)">
                <el-row :gutter="20" class="h-100">
                    <el-col
                            class="h-100"
                            :span="12"
                            style="
              border-right: 1px solid #e6e8ec;
              display: flex;
              align-items: center;
            "
                    >
                        <div
                                class="fullScreen"
                                style="width: 100%; display: flex;flex-direction:column;justify-content:center;align-items:center;height: 100%;margin-bottom: 20px"
                        >

                            <div style="text-align: center" v-if="currentInfo.personnelInfo">
                                <!--<h3 style="color: #0666d2">NO：{{ currentInfo.personnelInfo.jobNumber }}</h3>-->
                                <!--显示真实头像-->
                                <el-image
                                        v-if="currentInfo.head===1"
                                        style="width: 300px; height: 370px;border-radius: 8px;"
                                        :src="currentInfo.base64Pic"
                                        fit="contain"
                                ></el-image>
                                <!--显示默认头像-->
                                <el-image
                                        v-if="currentInfo.head===-1"
                                        style="width: 300px; height: 370px;position: relative;"
                                        :src="currentInfo.largeHead"
                                        fit="contain"
                                ></el-image>
                            </div>
                            <div class="leftDetail" v-if="currentInfo.personnelInfo">
                                <p :title="currentInfo.personnelInfo==null?'-':currentInfo.personnelInfo.name" class="name">{{ currentInfo.personnelInfo==null?'-':currentInfo.personnelInfo.name}}</p>
                                <p class="leftItem">
                                    <!--通行时间-->
                                    <span :style="{width:labelWidth}" class="label">{{this.i18n.t('Transit time')}} </span>
                                    <span>{{currentInfo.passDateTime}}</span>
                                </p>
                                <p class="leftItem">
                                    <!--识别方式-->
                                    <span :style="{width:labelWidth}" class="label">{{this.i18n.t('Identification method')}} </span>
                                    <span>{{ this.i18n.t(identificationType[currentInfo?.passBy*1].label) }}</span>
                                </p>
                                <p class="leftItem">
                                    <!--编号-->
                                    <span :style="{width:labelWidth}" class="label">{{this.i18n.t('Number (job number)')}} </span>
                                    <span>{{ currentInfo.personnelInfo.jobNumber }}</span>
                                </p>
                                <p class="leftItem">
                                    <!--性别-->
                                    <span :style="{width:labelWidth}" class="label">{{this.i18n.t('Gender')}} </span>
                                    <span>{{ currentInfo?.personnelInfo?.sex == 0 ? this.i18n.t('Male') : currentInfo.personnelInfo.sex == 1 ? this.i18n.t('Female') : this.i18n.t('unknown') || '-'}}</span>
                                </p>
                                <p class="leftItem">
                                    <!--组织名称-->
                                    <span :style="{width:labelWidth}" class="label">{{this.i18n.t('organization name')}} </span>
                                    <span>{{ currentInfo.personnelInfo.departmentInfo.name || '-' }}</span>
                                </p>
                            </div>
                        </div>
                    </el-col>
                    <el-col class="h-100" :span="12">
                        <!--通行记录-->
                        <p>{{this.i18n.t('Traffic records')}}</p>
                        <br/>
                        <el-table
                                size="medium"
                                class="myTable"
                                :cell-class-name="getCellClass"
                                :show-header="false"
                                :data="tableData"
                                :height="tableHeight"
                                style="width: 100%"
                                @current-change="handleCurrentChange"
                                v-loading="tableLoading"
                        >
                            <el-table-column prop="number" label="图片">
                                <template slot-scope="scope">
                                    <!--<i class="el-icon-time"></i>-->
                                    <!--<span style="margin-left: 10px">{{ scope.row.date }}</span>-->
                                    <el-image
                                            style="position:absolute;top: 0;left: 0;height: 75px"
                                            :src="scope.row.head===1?scope.row.base64Pic:scope.row.smallHead"
                                            fit="contain"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="工号"
                                             show-overflow-tooltip>
                                <template slot-scope="scope" show-overflow-tooltip>
                                    {{ scope.row.personnelInfo==null?'-':scope.row.personnelInfo.jobNumber}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="personnelInfo.name" label="姓名"
                                             show-overflow-tooltip>
                                <template slot-scope="scope" show-overflow-tooltip>
                                    {{ !scope.row.personnelInfo?'-':scope.row.personnelInfo.name}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="passBy" label="识别方式" show-overflow-tooltip>
                                <template slot-scope="scope" show-overflow-tooltip>
                                    {{ $t(identificationType[scope.row.passBy*1].label) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="passDateTime" label="通行日期" show-overflow-tooltip>
                                <template slot-scope="scope" show-overflow-tooltip>
                                    {{ scope.row.passDateTime ? scope.row.passDateTime.slice(0,10) : '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="passDateTime" label="通行时间" show-overflow-tooltip>
                                <template slot-scope="scope" show-overflow-tooltip>
                                    {{ scope.row.passDateTime ? scope.row.passDateTime.slice(11,20) : '-'}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import {cachestroeSet, cachestroeGet} from "@/api/login.js";
    import {passrecordGetlist} from "@/api/kqgl"
    import {identificationType} from '@/assets/common/js/utils/deviceConfig.js'
    import {
        fileImageconverttobase64
    } from "@/api/pcmj/zzxx";

    export default {
        name: "index",
        data() {
            return {
                smallHead:require("@/assets/common/img/smallHead.jpg"),
                largeHead:require("@/assets/common/img/largeHead.jpg"),
                lang:null,
                msgIndex:null,
                isFullscreen:false,
                isProjectionScreen:false,
                tx: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
                tableHeight: 0,
                soundSwitch: 0,
                soundLabel: "soundEnable",
                tableLoading: false,
                tableData: [],
                currentId: '',
                currentInfo: {},
                identificationType: identificationType,
                defaultHead:""
            };
        },
        computed:{
            labelWidth: function() {
                return this.lang == 'zh-CN' ? '85px' : '150px';
            }
        },
        watch: {
          '$store.state.dataDashboard':{
            handler (newVal,oldVal) {
              //对数据执行操作
              console.log('$store的dataDashboard变化了，要更新列表了',newVal,oldVal)
              this.$nextTick(()=>{
                this.initTable()
              })

            },
            deep: true // 深度监听
          },
            currentId(val) {
                if (this.tableData.length !== 0) {
                    this.tableData.forEach(item => {
                        if (item.id == val) {

                            var res=JSON.parse(JSON.stringify(item))
                            if(res.personnelInfo==null){
                                res.personnelInfo={
                                    name:'-',
                                    sex:'-',
                                    jobNumber:'-',
                                    passBy:'-',
                                    passDateTime:'-'
                                }
                            }
                        if(!res.personnelInfo.departmentInfo){
                            res.personnelInfo.departmentInfo={
                                name:'-'
                            }
                        }
                            // this.$set(this.currentInfo,'personnelInfo.JobNumber',res.personnelInfo.JobNumber)
                            this.currentInfo = res

                                // if(this.currentInfo.personnelInfo==null){
                                //     this.$set(this.currentInfo,'personnelInfo.JobNumber',6666)
                                // }
                            // this.$set(this.currentInfo,'personnelInfo.JobNumber',9999999)

                            console.log('watch-currentInfo', this.currentInfo)
                        }
                    })
                }
            }
        },
        methods: {
            fscreen() {
                var el = document.documentElement
                var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen

                if (!isFullscreen) {
                    //进入全屏
                    (el.requestFullscreen && el.requestFullscreen()) ||
                    (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
                    (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
                    (el.msRequestFullscreen && el.msRequestFullscreen())
                    this.isFullscreen=true

                    this.msgIndex=this.$message({
                        showIcon:false,
                        center: true,
                        showClose: true,
                        dangerouslyUseHTMLString: true,
                        // 按 Esc 即可退出全屏模式
                        message: '<strong>'+ this.i18n.t('press')+ '<b style="padding:5px 10px;background: #000;color: #fff;border-radius: 5px;margin-left: 5px;margin-right: 5px">Esc</b> '+ this.i18n.t('to exit full screen mode')+'</strong>'
                    });

                } else {
                    this.msgIndex.close()
                    //退出全屏
                    document.exitFullscreen
                        ? document.exitFullscreen()
                        : document.mozCancelFullScreen
                        ? document.mozCancelFullScreen()
                        : document.webkitExitFullscreen
                            ? document.webkitExitFullscreen()
                            : ''
                    this.isFullscreen=false
                }
                console.log(isFullscreen);
                return isFullscreen
            },
            openWind(){
                const { href } = this.$router.resolve({
                    path: `/sjkb`,
                    query: {
                        projectionScreen: 1
                    }
                })
                window.open(href, '_blank',"width=1350,height=750")
            },
            cachestroeSet(val) {
                cachestroeSet({key: this.soundLabel, value: val}).then((res) => {
                    if (res.code == 200) {
                    }
                });
            },
            soundChange(val) {
                this.cachestroeSet(val);
            },
            cachestroeGet() {
                cachestroeGet(this.soundLabel).then((res) => {
                    if (res.code == 200) {
                        this.soundSwitch = res.data;
                    }
                });
            },
            getCellClass({row, column, columnIndex}) {
                if (row.id == this.currentId) {
                    return "active";
                } else {
                    return "";
                }
            },
            setTableHeight() {
                //获取浏览器高度并计算得到表格所用高度。
                this.tableHeight = window.innerHeight - (this.isProjectionScreen?135:220);
                // this.tableHeight = window.innerHeight - 120;
                console.log('设置高度',this.tableHeight);
            },
            initTable() {
                this.tableLoading = true;
                passrecordGetlist({
                    pageNumber: 1,
                    pageSize: 20
                })
                    .then(async (res) => {
                        if (res.data.values.length != 0) {
                            var result=res.data.values
                            // 模拟数据
                            // var result=[{"personnelInfoId":"5c309f29-7061-4bff-bd97-4556292cf2ec","personnelInfo":{"deviceCode":null,"jobNumber":"001","idCard":null,"nfcCode":null,"password":null,"name":"林亮","personnelCode":"aeb865de7d027c59842e8d806fc3215f","sex":0,"telephone":null,"registrationTime":"0001/01/01 00:00:00","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\35d1d78f-255c-404b-bf72-92a55825b7e1\\face\\face2.jpg","biodataInfos":{"eye_left":[],"eye_right":[],"face":["C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\35d1d78f-255c-404b-bf72-92a55825b7e1\\face\\face2.jpg"],"fingerprint1":[],"fingerprint10":[],"fingerprint2":[],"fingerprint3":[],"fingerprint4":[],"fingerprint5":[],"fingerprint6":[],"fingerprint7":[],"fingerprint8":[],"fingerprint9":[],"hand_left":["C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left2.jp2","C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left3.jp2","C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left4.jp2"],"hand_right":[]},"departmentName":"","departmentInfoId":null,"departmentInfo":null,"attendanceRecordInfos":[],"uploadTime":null,"updateTime":"2023/09/14 11:09:44","uploadPersonId":null,"applyDeviceIds":null,"id":"5c309f29-7061-4bff-bd97-4556292cf2ec"},"personName":"林亮","personNumber":"001","passDateTime":"2023/09/14 11:17:37","success":true,"passBy":2,"passByStr":"掌静脉","deviceId":"6442bd48-597f-4a83-8ede-77676eac7406","deviceInfo":{"deviceCode":"202308250935001","deviceName":"Maxvision1","deviceType":2,"ip":null,"port":null,"mac":null,"updataStates":null,"concurrencyStamp":"94389be874f340388a0298abf2a6f29b","id":"6442bd48-597f-4a83-8ede-77676eac7406","domainEvents":[]},"deviceName":"Maxvision1","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\8ec29f80-4eac-41f7-b381-38ed8a8ef873\\face\\face2.jpg","id":"fec7dacc-34dc-4bbe-868c-532c8916f4da"},{"personnelInfoId":"5c309f29-7061-4bff-bd97-4556292cf2ec","personnelInfo":{"deviceCode":null,"jobNumber":"001","idCard":null,"nfcCode":null,"password":null,"name":"林亮","personnelCode":"aeb865de7d027c59842e8d806fc3215f","sex":0,"telephone":null,"registrationTime":"0001/01/01 00:00:00","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\8ec29f80-4eac-41f7-b381-38ed8a8ef873\\face\\face2.jpg","biodataInfos":{"eye_left":[],"eye_right":[],"face":[],"fingerprint1":[],"fingerprint10":[],"fingerprint2":[],"fingerprint3":[],"fingerprint4":[],"fingerprint5":[],"fingerprint6":[],"fingerprint7":[],"fingerprint8":[],"fingerprint9":[],"hand_left":["C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left2.jp2","C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left3.jp2","C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\5c309f29-7061-4bff-bd97-4556292cf2ec\\hand_left\\hand_left4.jp2"],"hand_right":[]},"departmentName":"","departmentInfoId":null,"departmentInfo":null,"attendanceRecordInfos":[],"uploadTime":null,"updateTime":"2023/09/14 11:09:44","uploadPersonId":null,"applyDeviceIds":null,"id":"5c309f29-7061-4bff-bd97-4556292cf2ec"},"personName":"林亮","personNumber":"001","passDateTime":"2023/09/14 11:17:44","success":true,"passBy":2,"passByStr":"掌静脉","deviceId":"6442bd48-597f-4a83-8ede-77676eac7406","deviceInfo":{"deviceCode":"202308250935001","deviceName":"Maxvision1","deviceType":2,"ip":null,"port":null,"mac":null,"updataStates":null,"concurrencyStamp":"94389be874f340388a0298abf2a6f29b","id":"6442bd48-597f-4a83-8ede-77676eac7406","domainEvents":[]},"deviceName":"Maxvision1","imagePath":"C:\\Users\\Administrator\\AppData\\Local\\maxvisionProducts\\accesscontrol\\BiodataInfos\\8ec29f80-4eac-41f7-b381-38ed8a8ef873\\face\\face2.jpg","id":"f83a3242-0d65-48a5-adb6-b0a329b834bf"}]
                            for (var i = 0; i < result.length; i++) {
                                result[i].base64Pic=""
                                if (result[i].personnelInfo&&Object.keys(result[i].personnelInfo.biodataInfos).length !== 0 &&
                                    result[i].personnelInfo.biodataInfos.face && result[i].personnelInfo.biodataInfos.face.length != 0) {
                                    console.log('有人脸',result[i].personnelInfo.biodataInfos.face[0].fileInfo);
                                    result[i].head=1
                                    await this.fileImageconverttobase64(result[i].personnelInfo.biodataInfos.face[0].fileInfo).then(base64 => {
                                        result[i].base64Pic = base64
                                    })

                                }else{
                                    console.log('无人脸');
                                    result[i].head=-1
                                    result[i].smallHead = this.smallHead
                                    result[i].largeHead = this.largeHead

                                }
                            }

                            this.tableData = result
                            console.log(199, this.tableData);
                            this.currentId = this.tableData[0].id
                        }
                        this.tableLoading = false;
                    })
                    .catch((err) => {
                        console.log(err)
                        this.tableLoading = false;
                    });
            },
            initMQtt() {
              //   console.log('globalWebSocket', this.$globalWebSocket.ws)
              //   let _that = this
              // this.$globalWebSocket.ws.onmessage = function (e) {
              //       if (e.data) {
              //           var data = JSON.parse(e.data)
              //           if (data.topic == 'passRecord') {
              //               _that.initTable()
              //           }
              //           console.log('sjkb-index.vue mqtt返回信息', data);
              //       }
              //
              //   };
            },
            handleCurrentChange(row) {

                console.log(row);
                if (this.isProjectionScreen){
                    return
                }
                this.currentId = row.id
            },
            async fileImageconverttobase64(filePath) {
                let res = await fileImageconverttobase64(filePath);
                return res
            },
            fullScreenEsc () {

                console.log('是否全屏',document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen);

                return
                if (!this.fscreen()) {
                    this.fullScreenFlag = false
                }

            },
        },
        mounted() {
            this.lang=this.$store.state.language
            console.log('store内的语言',this.lang);
            var _this=this
           this.$nextTick(()=>{
               this.setTableHeight()
           })
            console.log('router',this.$route);
            if(this.$route.query.projectionScreen){
                this.isProjectionScreen=true
                // 隐藏顶部导航栏
                document.getElementsByClassName('topBox')[0].style.display="none"
                document.getElementsByClassName('contentBox')[0].style.height="100%"
                document.getElementsByClassName('contentBox')[0].style.maxHeight="100%"
                document.getElementsByClassName('tab-content')[0].style.padding=0
                document.getElementsByClassName('tab-content')[0].style.height="100%"
                document.querySelector('.conRight br').style.display="none"
                // document.addEventListener("fullscreenchange", this.fullScreenEsc)
                document.addEventListener('fullscreenchange', (event) => {
                    if (document.fullscreenElement) {

                        // alert("已进入全屏模式")
                        console.log(`Element: ${document.fullscreenElement.id} 已进入全屏模式.`);
                    } else {
                        this.isFullscreen=false
                        this.msgIndex.close()
                        console.log("离开全屏模式")
                    }
                });
                document.onkeydown=(e)=>{
                    console.log(e.keyCode );
                    if (e.keyCode==122){
                        return false
                    }
                    // debugger
                    // if (e.keyCode==27){
                    //     // _this.fscreen()
                    //     // return false
                    //     // this.isFullscreen=false
                    // }
                }

            }

            //初始化声音开关状态
            this.cachestroeGet();
            //获取最新十条记录
            this.initTable();
            var _this = this;
            window.onresize = function () {
                //用于使表格高度自适应的方法
                _this.setTableHeight(); //获取容器当前高度，重设表格的最大高度
            };

        },
    };
</script>

<style scoped>
    .topView {
        padding: 15px;
        box-sizing: border-box;
    }

    .topView:after {
        clear: both;
        content: "";
        display: block;
    }

    .switchView {
        float: right;
    }

    .leftItem {
        /*font-size: 16px;*/
        line-height: 30px;
    }

    .leftDetail {
        font-size: 14px;
    }

    .leftDetail .label {
        color: #727b8f;
        display: inline-block;
        text-align-last: justify;

        margin-right: 10px;
    }
    /deep/ .el-table .active{
        color: #fff !important;
        /*border-left: 2px solid red;*/
        background: linear-gradient(
                180deg,
                rgba(6, 102, 210, 0.98) 0%,
                rgba(0, 166, 179, 0.79) 99.93%
        );
        /*background: #0566e7;*/
        /*box-shadow: inset 0px -1px 0px rgba(228, 233, 242, 1);*/
    }
    /deep/ .myTable .el-table__body-wrapper .el-table__body .el-table__row .active.el-table__cell .cell{
        color: #fff !important;
    }
    .projectionDisplay{
        font-size: 16px;
        color: #262b32;
        margin-bottom: 2px;
    }
    .displayMode{
        float: right;
    }
    .displayMode i{
        margin-left: 5px;
    }
    .name{
        text-align: center;
        font-size: 36px;
        margin-top: 15px;
        margin-bottom: 15px;
        white-space: nowrap;
        overflow: hidden;
        color: #0666d2;
        font-weight: 700;
        text-overflow: ellipsis;
    }
    .fullScreen{
        margin-left: 20px;
        margin-right: 15px;
        background:linear-gradient(180deg,rgba(235,242,252,1)0%,rgba(237,241,247,0)99.8%);
    }
    /deep/ .el-table--medium .el-table__cell{
        /*padding: 0 !important;*/
    }
    /deep/ .myTable .cell{
        padding: 0!important;
        height: 55px;
        line-height: 55px!important;
        text-align: center;
        box-sizing: border-box;
        overflow: hidden;
    }

</style>
